import { ElButton } from "element-plus";
import {defineComponent, ref} from "vue";
import BreadCrumb from "~/src/components/BreadCrumb";
import { Steps } from "~/src/components/Steps";
import SvgIconAl from "~/src/components/SvgIconAl";
import { UserInfo } from "~/src/components/UserInfo";
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import {KEEP_VIDEO_TOP, XZLHFF, ZFLX} from '~/src/config';
import router from "@/router";
import {useBreadcrumbStore} from "@/store/modules/breadcrumb";
import {useRoute} from "vue-router";
import {useUserStore} from "@/store/modules/user";
import {MaskedName} from "@/utils/hooks";
import {ghStore} from "@/store/modules/yvyue";
import {gh, ghyjs, yjs} from "@/api/his";
import {closeLoading, showLoading} from "@/utils";
import {tempStore} from "@/store/modules/temp";
export default defineComponent({
    setup(props) {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080
        const breadcrumbStore = useBreadcrumbStore(); // 实例化Pinia
        const lx = breadcrumbStore.titlelx; // 选择的类型
        const mz = breadcrumbStore.titleArray[0];// 选择的门诊
        const zs = breadcrumbStore.titleArray[1];// 选择的诊室
        const hysj = breadcrumbStore.titleArray[3];// 选择的预约时间
        const tempstore = tempStore();

        // 获取挂号选择信息
        const ghstore =ghStore();//实例化pinia存储
        //获取用户姓名 张*明
        const userStore = useUserStore();
        const userName = ref(userStore.user?.PAT_NAME ?? '-');
        // 获取用户的就诊卡号 3312*********4587
        const JZKH =ref(userStore.user?.JZKH ?? '');
        // 取消预约
        const handleCancel = () => {
            router.push({
                path: "/HomePage"
            })
        }
        // 立即挂号/预约
        const lj = async () => {
            switch (lx){
                case '挂号':{
                    // 先诊疗 后付费
                    if (XZLHFF){
                        const res = await gh({hy:ghstore.hy, doctor: ghstore.doctor,ghtype:'0'})
                        router.push({path: "/lqpt"})
                    // 先付费 后诊疗
                    }else {
                        // 无医保 直接自费
                        if (ZFLX){
                            showLoading()
                            // 1.预结算
                            let res =await ghyjs({
                                hy:ghstore.hy, doctor: ghstore.doctor,
                                xzpayType:'1' // 0医保 1 自费
                            })
                            tempstore.setyjsItemInfo({
                                zfje:res.rows.zfje,
                                ybje:res.rows.ybje,
                                zje:res.rows.zje,
                                lsh:res.rows.lsh,
                                orderNo:res.rows.orderNo,
                            })
                            closeLoading()
                            router.push({path: "/smt"})
                        // 有医保 可选择 自费或医保
                        }else{
                            router.push({path: "/selectPayType"})
                        }
                    }
                }break ;
                case '预约':{
                    const res = await gh({hy:ghstore.hy, doctor: ghstore.doctor,ghtype:'1'})
                    router.push({
                        path: "/lqpt"
                    })
                }break ;
            }
        }

        // 确认按钮
        const handleOk = ()=>{
            switch (lx){
                case '挂号':{
                    if (XZLHFF) return '立即挂号'
                    else return '立即缴费'
                }
                case '预约':return '立即预约'
            }
        }

        return () => <>
            <UserInfo></UserInfo>
            <Steps></Steps>
            <BreadCrumb style={{width: '94.2%', marginBottom:'-2px', height: "80px", paddingLeft: "63px"}}></BreadCrumb>
            <div class={Style.container_mar} >
                <div class={Style.body}>
                    <div class={Style.outer}>
                        <div style={{ display: "flex" }}>
                            <div class={[Style.fontStyle, Style.doc_item]} style={{ flex: "1" }}>
                                <div >
                                    {ghstore.doctor?.DOCTORNAME}
                                </div>
                                <div style={{ color: "#666666", fontSize: "28px" }}>
                                    职称：{ghstore.doctor?.ZC_MC}
                                </div>
                            </div>
                            <div class={Style.picStyle}>
                                <img src={typeof ghstore.doctor?.PIC === 'string' ? ghstore.doctor?.PIC : ''} ></img>
                            </div>
                        </div>
                        {
                            KEEP_VIDEO_TOP?"":<div class={Style.divider_contain}>
                            <div class={Style.divider_top}></div>
                        </div>
                        }

                        <div class={Style.viist_item}>
                            <div >
                                <div class={Style.second_item}>
                                    <SvgIconAl size={"32px"} icon="icon-shijian"></SvgIconAl>
                                    <div style={{ marginLeft: "21px" }}>
                                        {ghstore.date?.rq}（{ghstore.date?.week}） {hysj}
                                    </div>
                                </div>
                                <div style={{ marginLeft: "97px" }} class={Style.font_item}>就诊时间</div>
                            </div>
                            <div class={Style.is_hp}>
                                <div class={Style.is_hp_item}>
                                    <div class={Style.second_item}>
                                        <SvgIconAl size={"32px"} icon="icon-keshi"></SvgIconAl>
                                        <div style={{ marginLeft: "21px" }}>
                                            {mz}——{zs}
                                        </div>
                                    </div>
                                    <div style={{ marginLeft: "97px" }} class={Style.font_item}>就诊科室</div>
                                </div>
                                <div class={Style.is_hp_item}>
                                    <div class={Style.second_item}>

                                        <div style={{ marginLeft: "21px" }}>
                                            {ghstore.hy?.Price}元
                                        </div>
                                    </div>
                                    <div style={{ marginLeft: "62px" }} class={Style.font_item}>挂号费</div>
                                </div>
                            </div>
                        </div>
                        <div class={Style.divider_contain_bottom}>
                            <div class={Style.halfCircleLeft}></div>
                            <div class={Style.divider_contain}>
                                <div class={Style.divider_top2}></div>
                            </div>
                            <div class={Style.halfCircleRight}></div>
                        </div>
                        <div class={Style.pat_item} >
                            <div>
                                就诊人：{userName.value}
                            </div>
                            <div class={Style.pat_item2}>
                                就诊卡号：{JZKH.value}
                            </div>
                        </div>
                    </div>
                    <div class={[Style.btnStyle, "qrxx_btn"]}>
                        <ElButton type="primary" plain onClick={handleCancel}>取消</ElButton>
                        <ElButton class={Style.btnStyle_item} type="success" onClick={lj}>{handleOk()}</ElButton>
                    </div>
                </div>
            </div>
        </>

    }
})
